<template>
  <view class="fans-list-page">
    <!-- 导航栏 -->
  <!--  <view class="navbar">
      <view class="back-btn" @click="navigateBack">
        <icon type="left" size="24" color="#333"></icon>
      </view>
      <view class="navbar-title">
        <text>新增粉丝</text>
      </view>
      <view class="empty-view"></view>
    </view> -->
    
    <!-- 粉丝列表 -->
    <view class="fans-list">
      <view class="fan-item" v-for="(fan, index) in newFans" :key="index">
        <view class="fan-avatar">
          <image :src="fan.avatar" mode="widthFix" class="avatar-img"></image>
        </view>
        <view class="fan-info">
          <text class="fan-name">{{ fan.name }}</text>
          <text class="follow-time">{{ fan.followTime }}</text>
        </view>
        <view class="action-btn">
          <button 
            class="follow-btn" 
            @click="followBack(fan.id, index)"
            :disabled="fan.isFollowing"
          >
            {{ fan.isFollowing ? '已关注' : '关注' }}
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 新增粉丝列表
      newFans: [
        { id: 101, name: '小明', avatar: 'https://picsum.photos/id/1074/200', followTime: '刚刚', isFollowing: false },
        { id: 102, name: '小红', avatar: 'https://picsum.photos/id/1062/200', followTime: '10分钟前', isFollowing: false },
        { id: 103, name: '小刚', avatar: 'https://picsum.photos/id/1066/200', followTime: '1小时前', isFollowing: false }
      ]
    };
  },
  
  methods: {
    // 返回上一页
    navigateBack() {
      uni.navigateBack({
        delta: 1
      });
    },
    
    // 回关粉丝
    followBack(fanId, index) {
      // 模拟接口请求
      uni.showLoading({
        title: '关注中...'
      });
      
      setTimeout(() => {
        // 更新本地状态
        this.newFans[index].isFollowing = true;
        
        uni.hideLoading();
        uni.showToast({
          title: '关注成功',
          icon: 'success',
          duration: 2000
        });
        
        // 实际项目中这里应该调用接口完成关注操作
      }, 800);
    }
  }
};
</script>

<style scoped>
.fans-list-page {
  background-color: #f5f5f7;
  min-height: 100vh;
  padding-top: 0; /* 预留导航栏高度 */
}

/* 导航栏 */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  padding: 0 15px;
  border-bottom: 1px solid #eee;
  z-index: 99;
}

.back-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-title {
  flex: 1;
  text-align: center;
}

.navbar-title text {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.empty-view {
  width: 40px;
  height: 40px;
}

/* 粉丝列表 */
.fans-list {
  padding: 15px;
}

.fan-item {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 12px 15px;
  margin-bottom: 10px;
}

.fan-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 15px;
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fan-info {
  flex: 1;
}

.fan-name {
  font-size: 16px;
  color: #333;
  display: block;
  margin-bottom: 5px;
}

.follow-time {
  font-size: 13px;
  color: #999;
}

.action-btn {
  width: 80px;
}

.follow-btn {
  width: 100%;
  height: 36px;
  line-height: 36px;
  background-color: #007aff;
  color: #ffffff;
  border-radius: 18px;
  font-size: 14px;
  padding: 0;
}

.follow-btn:disabled {
  background-color: #eeeeee;
  color: #999999;
}
</style>
    